<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet Measure Path - example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <link rel="stylesheet" href="../leaflet-measure-path.css" />
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
            font-size: 10px;
        }
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #banner {
            position: absolute;
            left: 30%;
            right: 30%;
            bottom: 12px;
            height: 100px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 4px;
            z-index: 1001;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="banner">
        <h1>Leaflet Measure Path</h1>
        <p>
            A plugin to show measurements on paths
        </p>
        <p>
            <a href="https://github.com/perliedman/leaflet-measure-path/">
                More info on GitHub!
            </a>
        </p>
    </div>

    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet-editable@latest/src/Leaflet.Editable.js" ></script>
    <script src="../leaflet-measure-path.js"></script>
    <script type="text/javascript">
        var map = L.map('map', {editable: true}).setView([57.69, 11.9], 13);
        L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png').addTo(map);
        // Polygon that shows measurements from the start, agnostic of hover.
        var polygon = L.polygon([
                [57.69, 11.89],
                [57.697, 11.88],
                [57.71, 11.89],
                [57.71, 11.91],
                [57.69, 11.91]
            ], { showMeasurements: true })
            .addTo(map);
        // Polygon that shows measurements only when cursor hovers over polygon.
        var polygonWithHover = L.polygon([
                [57.668, 11.89],
                [57.675, 11.88],
                [57.688, 11.89],
                [57.688, 11.91],
                [57.668, 11.91]
            ],
            {
                showMeasurements: true,
                measurementOptions: { showOnHover: true }
            })
            .addTo(map);
        // Path of lines that shows measurements from the start, agnostic of hover.
        L.polyline([
                [57.67, 11.85],
                [57.677, 11.86],
                [57.68, 11.85],
                [57.69, 11.86],
            ],
            {
                showMeasurements: true,
                measurementOptions: { imperial:true }
            })
            .addTo(map);
        // Circle that shows measurements from the start, agnostic of hover.
        L.circle([57.694, 11.94], 1000, { showMeasurements: true })
            .addTo(map);
        // Circle that shows measurements from the start in non-scientific-standard measurements
        // (acres, etc.), agnostic of hover.
        L.circle([57.705, 11.92], 750,
            {
                showMeasurements: true,
                measurementOptions: { imperial:true }
            })
            .addTo(map);
        // Circle that shows measurements only when cursor hovers over circle.
        L.circle([57.675, 11.92], 350,
            {
                showMeasurements: true,
                measurementOptions: { showOnHover: true }
            })
            .addTo(map);
        // Activates edit for non-hover polygon.
        polygon.enableEdit();
        map.on('editable:vertex:drag editable:vertex:deleted', polygon.updateMeasurements, polygon);
    </script>
</body>
</html>